<template>
	<view class="floor">
		<!-- 通栏卡片 -->
		<uni-card  :isFull="true">
		<!-- 卡片头部 -->
		<view class="card-header" slot="title">
			<image src="/static/sort/首页轮播图/logo-s.png" mode="widthFix" class="card-icon"/>
			<text class="card-title">{{title}}</text>
			<navigator class="more" :url="href">更多</navigator>
		</view>
		<!-- 卡片主题 -->
		<view class="card-body">
			<view class="product" v-for="(p,i) in item" :key="i">
			<!-- 每一个商品都是一个卡片 -->
			 <uni-card margin="4px" spacing="0" padding="6px">
			  <view class="product-content">
				  <image class="pic" :src="$base+p.pic" mode="scaleToFill" />
				  <text class="title">{{p.title}}</text>
				  <view class="details">
					  <text class="price">￥{{p.price}}</text>
					  <button type="primary" size="mini" class="btn" @click="Godetail(p.lid)" >查看详情</button>
				  </view>
			  </view>
			   </uni-card>
			</view>
		</view>
		<!-- 卡片结尾 -->
		</uni-card>
			</view>
</template>

<script>
	export default {
		//为组件生名自定义属性
		props:{
			title:{
				type:String,
				default:'楼层名称'
			},
			href:{
				type:String,
				default:''
			},
			item:{
				type:Array,
				default:[]
			}
		},
		methods:{
			Godetail(lid){
				uni.navigateTo({
					url:`/pages/productDetails/productDetails?lid=${lid}`
				})
			}
		},
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">

.floor{
	padding-top: 10px;//10px

	.card-header{
		display: flex;
		align-items: center;
		border-bottom: 1px solid #c8c7cc;
		padding: 10px 0;
		
		.card-icon{
			width: 40rpx;
			margin-right: 5px;
		}
		.card-title{
			flex: 1;
		
		}
		.more{
			font-size:12px ;
			color: lighten(#666,25%);
		}
	}
     .card-body{
		 display: flex;
		 flex-wrap: wrap;
		 padding:0px;
		 	
		 
		 .product{
			 width: 50%;

	
			 .product-content{
				 display: flex;
				 flex-direction: column;
				 justify-content: center;
				 .pic{
					 width: 95%;
					 height: 210rpx;
				 }
				 .title{
					 text-overflow: ellipsis;
					 overflow: hidden;
					  white-space: nowrap;
				 }
				 .details{
					 width: 100%;
					 display: flex;
					 align-items: center;
				      justify-content: flex-end;
					 .price{color: #0aa1ed; font-size:12px}
					 .btn{padding: 0px 5px; font-size:12px;margin-left: 10rpx;}
				 }
			 }
		 
	 } 
	 }
}

</style>